<template>
    <view class="container">
        <!-- @scrolltolower="scrolltolower" -->
        <scroll-view scroll-y="true" class="scroll">
            <view class="detail-head">
                <view class="head-top row">
                    <view class="head-info">
                        <view class="title"> 子弹发薪 </view>
                        <view class="name"> 商务负责人：肖恩 </view>
                    </view>
                    <view class="head-close"> 关闭服务 </view>
                </view>
                <view class="company-box">
                    <view class="company-customer">
                        <view> 关联客户： </view>
                        <view class="title">
                            郑州富士康科技有限公司
                            <image
                                src="@/static/home/right-arrow.png"
                                class="arrow-img"
                            />
                        </view>
                    </view>
                    <view class="company-contacts">
                        <view>相关联系人：</view>
                        <view class="title">
                            <view class="contacts-list">
                                <image
                                    class="contacts-i"
                                    src="../../../static/logo.png"
                                />
                                <image
                                    class="contacts-i"
                                    src="../../../static/logo.png"
                                />
                            </view>
                            3人
                            <image
                                src="@/static/home/right-arrow.png"
                                class="arrow-img"
                            />
                        </view>
                    </view>
                </view>
            </view>
            <!-- 子弹发薪列表 -->
            <view>
                <view class="tab-radius">
                    <tab-radius
                        :list="['详细信息', '充值记录', '运营数据']"
                        :active="payIndex"
                        @change="onPayTab"
                        divided="100%"
                    />
                </view>
                <!-- 详细订单 -->
                <view class="record-list" v-if="payIndex === 0"> 
                <message/>
                </view>
                <!-- 充值记录 -->
                <view class="sale-list" v-if="payIndex === 1">
                <fill/>
                </view>
                <!-- 运营数据 -->
                <view class="operate" v-if="payIndex === 2">
                    <manipulate/>
                </view>
            </view>
        </scroll-view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import tabRadius from '@/components/tab-radius/tab-radius.vue'
import componentTab from '@/components/tab/tab.vue'
import tabCapsule from '../../../components/tab-capsule/tab-capsule.vue'
import message from '@/packageQuick/pages/electronic-communication/message/message.vue'
import fill from '@/packageQuick/pages/electronic-communication/fill/fill.vue'
import manipulate from '@/packageQuick/pages/electronic-communication/manipulate/manipulate.vue'
const payIndex = ref(2)

// tab发薪胶囊回调
const onPayTab = (index: number) => {
    payIndex.value = index
}
</script>
<style lang="scss" scoped>
.container {
    // min-height: 100vh;
    background: #fafafc;
    padding-bottom: 89rpx;
}
.tab-box {
    display: flex;
    align-items: center;
    justify-content: center;
}
.tab-radius {
    margin-top: 30rpx;
    padding: 0rpx 30rpx;
}
.scroll {
    height: 100vh;
}
.record-list {
    padding: 0 30rpx;
    margin-top: 34rpx;
}

// 充值记录列表
.sale-list {
    padding: 30rpx;
}
// 运营数据css

.operate-box {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 39rpx 30rpx 0 30rpx;
    .title {
        color: $black;
        font-size: $font-normal;
        font-weight: bold;
    }
    .box-list {
        @include flex-between;
        flex-wrap: wrap;
        margin: 30rpx 0 30rpx 0;
    }
    .box-i {
        width: calc(100% / 2.6);
        background: #f4f4f7;
        padding: 23rpx 0 23rpx 30rpx;
        border-radius: 16rpx;
        margin-bottom: 30rpx;
    }
    .title {
        color: #565868;
        font-weight: bold;
    }
    .num {
        color: $black;
        font-weight: bold;
        font-size: $font-large;
        margin-top: 10rpx;
    }
    .company {
        font-size: $font-small;
    }
}
// 员工库
.chart-box {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 39rpx 30rpx;
    .chart-top {
    }
    .chart {
        margin-top: 30rpx;
        width: 100%;
        height: 376rpx;
        background: #fafafc;
    }
}
</style>
